<template>
  <view class="main">
    <action-bar :options="navOptions"></action-bar>
    <view class="main-box">
      <form class="main-box-form">
        <!-- 姓名 -->
        <view class="uni-form-item uni-column">
          <view class="title">姓名</view>
          <input class="input" v-model="form.name" placeholder="请输入您的姓名" />
        </view>

        <!-- 身份证号 -->
        <view class="uni-form-item uni-column">
          <view class="title">身份证号</view>
          <input class="input" v-model="form.identity" placeholder="请输入身份证号" />
        </view>

        <!-- 手机号 -->
        <view class="uni-form-item uni-column">
          <view class="title">手机号</view>
          <input class="input" v-model="form.phone" placeholder="请输入手机号" />
        </view>

        <button class="submit" form-type="submit" @click="formSubmit">关联</button>
      </form>
    </view>
  </view>
</template>
<script>
import { checkIDCardTools, checkPhoneTools } from "@/utils/tools.js";
export default {
  layout: "newLogin",
  data() {
    return {
      // 导航栏参数
      navOptions: {
        left: {
          icon: "back",
        },
        center: {
          title: "关联已有账户",
        },
      },
      form: {
        name: null,
        identity: null,
        phone: null
      }
    };
  },
  methods: {
    formSubmit() {
      let { name, identity, phone } = this.form
      // 校验身份证是否有误
      if (!this.checkIdCard(identity)) {
        uni.showToast({
          title: "请输入正确的身份证号码",
          icon: "none",
        });
        return;
      }
      // 校验手机号是否有误
      if (!this.checkPhone(phone)) {
        uni.showToast({
          title: "请输入正确的手机号码",
          icon: "none",
        });
        return;
      }
      // 校验姓名是否有误
      if (!this.checkName(name)) {
        uni.showToast({
          title: "请输入您的姓名",
          icon: "none",
        });
        return;
      }
    },
    checkIdCard: function (idCard) {
      if (!idCard && idCard != 1) return false;
      return checkIDCardTools(idCard, '身份证号格式有误');
    },
    checkPhone(phone) {
      if (!phone && phone != 1) return false;
      return checkPhoneTools(phone, '手机号格式不正确');
    },
    checkName: function (name) {
      if (!name && name != 1) return false;
      return true;
    },
    formReset: function (e) {
      console.log("清空数据");
    },
  },
};
</script>
<style lang="scss" scoped>
.main {
  box-sizing: border-box;
  min-height: 100vh
}

.main-box {
  height: calc(100vh - 80rpx);
  background: linear-gradient(to bottom, #b6d5fe 0%, #F5F6F6 22%, #F4F5F5 100%);
  padding: 20rpx;
  box-sizing: border-box;

  &-form {
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin: 0 auto
  }
}

.uni-column {
  display: flex;
  flex-direction: column;

  .title {
    font-size: 32rpx;
    font-weight: 700;
    color: #000;
  }

  .input {
    border-bottom: 1rpx solid #ccc;
  }

  .uni-input-placeholder {
    font-size: 26rpx;
  }
}

.submit {
  width: 60%;
  margin: 40rpx auto 0;
  border: 1rpx solid #ccc;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 10rpx;
}

.uni-form-item .title {
  padding: 20rpx 0;
}
</style>
